﻿@model ProductDetailsModel
@using Nop.Core.Domain.Media
@using Nop.Core.Infrastructure;
@using Nop.Web.Models.Catalog;
@{
    int productPerRow = EngineContext.Current.Resolve<MediaSettings>().ProductThumbPerRowOnProductDetailsPage;
}

@if (Model.PictureModels.Count > 1)
{
    <div class="picture-thumbs-wrapper" id="j-picture-thumbs-wrapper">
        <span class="slider-up icon-bg"></span>
        <ul class="picture-thumbs bxslider" id="j-picture-thumbs">
            @for (int i = 0; i < Model.PictureModels.Count; i++)
                {
                    var picture = Model.PictureModels[i];

                @*if (i % productPerRow == 0)
                    {
                        @Html.Raw("<div class=\"thumbs-inner\">")
                    }*@
                <li class="thumb-link @(i==0?"selected":"")" data-href="@picture.FullSizeImageUrl" title="@Model.Name">
                    <img src="@picture.ImageUrl" width="302" height="360" alt="@picture.AlternateText" title="@picture.Title" />
                    <span class="line"></span>
                </li>
                @*if ((i % productPerRow == (productPerRow - 1)) ||
                        //last image
                        (i == (Model.PictureModels.Count - 1)))
                    {
                        @Html.Raw("</div>")
                    }*@
                }
        </ul>
        <span class="slider-down icon-bg"> </span>
    </div>
    <script type="text/javascript">
            seajs.use(["jquery", "bxslider/1.0.0/index"], function ($, slider) {
                $(function () {
                    // slider
                    $("#j-picture-thumbs-wrapper").on("click", ".thumb-link", function (e) {
                        var $this = $(this);
                        $this.addClass("selected").siblings(".thumb-link").removeClass("selected");
                        var imgSrc = $this.data("href");
                        var $picviewimage = $("#pic-view-image").hide();
                        $('<img />').load(function () {
                            $picviewimage.attr("src", imgSrc).show();
                        }).attr("src", imgSrc);
                        return false;
                    });
                    slider.bxSlider('#j-picture-thumbs', {
                        infiniteLoop: false,
                        mode: 'vertical',
                        slideMargin: 5,
                        minSlides: 4,
                        maxSlides: 4,
                        pager: false,
                        slideWidth: 73,
                        moveSlides: 1,
                        nextSelector: '.slider-down',
                        prevSelector: '.slider-up',
                        nextText: '',
                        prevText: '',
                        onSlideAfter: function ($slideElement, oldIndex, newIndex) {
                            $slideElement.trigger("click");
                        }
                    });
                });
            });

    </script>
}
<div class="picture">
    <a href="@Model.DefaultPictureModel.FullSizeImageUrl" target="_blank" title="@Model.Name" id="main-product-img-lightbox-anchor-@Model.Id">
        <img alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title" itemprop="image" id="pic-view-image" />
    </a>

    @*@if (Model.DefaultPictureZoomEnabled)
        {
            <a href="@Model.DefaultPictureModel.FullSizeImageUrl" title="@Model.Name" id="main-product-img-lightbox-anchor-@Model.Id">
                <img alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title" itemprop="image" id="main-product-img-@Model.Id" />
            </a>
        }
        else
        {
            <img alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title" itemprop="image" id="main-product-img-@Model.Id" />
        }*@
</div>
